<template>
  <div class="continer">
    <el-form ref="MailtemplateTwo" label-position="right" label-width="160px">
      <el-form-item>
        <DataRefresh class="refresh" />
      </el-form-item>
      <el-form-item label="收件人：">
        <multiselect
          v-model="MailtemplateTwo.recipients"
          deselect-label="已选中"
          track-by="email"
          label="email"
          placeholder="输入关键词或选择"
          :options="otherPrincipalList"
          :close-on-select="false"
          :multiple="true"
          :taggable="true"
          tag-position="bottom"
          tag-placeholder="回车添加下拉框"
          selectLabel="回车选择"
          selectGroupLabel="回车选择整个分组"
          selectedLabel="已选择"
          deselectLabel="回车取消选择"
          deselectGroupLabel="回车取消选择"
          :custom-label="nameWithLang"
          searchable
          :disabled="bianjiOne"
          @tag="addTagOne"
        >
          <template slot="singleLabel" slot-scope="{ option }"
            ><strong>{{ option.name }}</strong> 由<strong> {{ option.email }}开发的</strong></template
          >
        </multiselect>
      </el-form-item>
      <el-form-item label="内容：">
        <el-input type="textarea" v-model="MailtemplateTwo.content" :disabled="bianjiOne"></el-input>
      </el-form-item>
      <el-form-item label="附件名称：">
        <el-input :disabled="bianjiOne" v-model="MailtemplateTwo.attachmentTitle"></el-input>
      </el-form-item>
      <el-form-item label="账号：">
        <el-input :disabled="bianjiOne" v-model="MailtemplateTwo.account"></el-input>
      </el-form-item>
      <el-form-item label="密码：">
        <el-input :disabled="bianjiOne" v-model="MailtemplateTwo.password"></el-input>
      </el-form-item>
      <el-form-item label="发送邮件服务器地址：">
        <el-input :disabled="bianjiOne" v-model="MailtemplateTwo.host"></el-input>
      </el-form-item>
      <div>
        <div v-if="bianjiOne" class="toEdito">
          <el-button type="primary" @click="ToEditorOne" class="clickButton">编辑</el-button>
        </div>
        <div v-else class="editorFalse">
          <el-button type="primary" @click="ToCanaleOne" class="canaleButton">取消</el-button>
          <el-button type="primary" @click="TosaveOne" class="clickButton">保存</el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import { EmailSetGet } from '@/api/setting/service.js'
import { FeedBack } from '@/api/feedBack/server'
import Multiselect from 'vue-multiselect'
import DataRefresh from '../../views/systemSetting/dataRefresh.vue'
export default {
    name: '',
    components: {
        DataRefresh,
        Multiselect
    },
    props: {},
    data() {
        return {
            bianjiOne: true,
            MailtemplateTwo: {
                Id: '',
                account: '',
                content: '',
                copyRecipients: '',
                emailType: '',
                host: '',
                password: '',
                recipients: '',
                title: ''
            },
            // ipsArrTwo: [],
            otherPrincipalList: []
        }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
        this.getUserList()
    },
    methods: {
        addTagOne(newTag) {
            let istrue = false
            this.otherPrincipalList.forEach(element => {
                if (element.name == newTag || element.email == newTag) {
                    istrue = true
                }
            })
            if (istrue) {
                const tag = {
                    email: newTag,
                    name: newTag.substring(0, 2) + Math.floor(Math.random() * 10000000)
                }
                this.otherPrincipalList.push(tag)
                this.MailtemplateOne.copyRecipients.push(tag)
            } else {
                const tag = {
                    email: newTag,
                    name: null
                    // name: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
                }
                this.otherPrincipalList.push(tag)
                this.MailtemplateOne.copyRecipients.push(tag)
            }
        },
        nameWithLang({ name, email }) {
            if (name) {
                return `${email} <${name}>`
            } else {
                return `${email}`
            }
        },
        async getUserList() {
            try {
                const result = await FeedBack.GetAllUserAsync()
                if (result.success) {
                    this.otherPrincipalList = result.data
                    console.log(result.data)
                    this.getCategoryTwo()
                }
            } catch (err) {
                console.log(err)
            }
        },
        ToEditorOne() {
            this.bianjiOne = false
        },
        TosaveOne() {
            this.bianjiOne = true
            this.SaveMailtemplateTwo()
        },
        ToCanaleOne() {
            this.bianjiOne = true
        },
        async getCategoryTwo() {
            try {
                const result = await EmailSetGet.EmailSetGetLoadAsync({
                    emailType: 'V2'
                })
                if (result.success) {
                    this.MailtemplateTwo = result.data
                    if (result.data.recipients) {
                        console.log('qqqqqqqq')
                        const str = result.data.recipients
                        const strArr = str.split(',')
                        console.log(strArr)
                        const arr = []
                        strArr.forEach(element => {
                            const selectIndex = this.otherPrincipalList.findIndex(_item => {
                                return _item.email == element
                            })
                            console.log(selectIndex)
                            if (selectIndex > -1) {
                                arr.push({
                                    name: this.otherPrincipalList[selectIndex].name,
                                    email: this.otherPrincipalList[selectIndex].email
                                })
                            } else {
                                arr.push({
                                    name: null,
                                    email: element
                                })
                            }
                        })
                        console.log(arr)
                        arr.forEach(els => {
                            els.$isDisabled = false
                        })
                        console.log(arr)
                        this.MailtemplateTwo.recipients = arr
                    } else {
                        this.MailtemplateTwo.recipients = []
                    }
                } else {
                    this.$message.error(result.message)
                }
            } catch (err) {
                this.$message.error('服务器异常')
            }
        },
        async SaveMailtemplateTwo() {
            this.MailtemplateTwo.emailType = 'V2'
            let str = ''
            for (const item of this.MailtemplateOne.recipients) {
                if (str === '') {
                    str = item.email
                } else {
                    str += ',' + item.email
                }
            }
            const data = this.MailtemplateTwo
            data.recipients = str
            console.log(data)
            try {
                const result = await EmailSetGet.EmailSetSaveAsync(data)
                if (result.success) {
                    this.$message.success(result.message)
                } else {
                    this.$message.error(result.message)
                }
            } catch (err) {
                this.$message.error('服务器异常')
            }
        }
    }
}
</script>

<style scoped lang="less">
::v-deep .el-textarea__inner {
  height: 362px;
  overflow-y: auto;
}
.promptStatement {
  color: #c0c4cc;
}
.continer {
  height: 760px;
}
.refresh {
  float: right;
}
.toEdito {
  width: 80px;
  position: relative;
  bottom: 0;
  left: 50%;
}
.editorFalse {
  width: 160px;
  position: relative;
  bottom: 0;
  left: 48%;
}
.clickButton {
  width: 70px;
  height: 30px;
  background: #eaf2ff;
  border: 1px solid #3579e0;
  border-radius: 5px;
  color: #3579e0;
  line-height: 8px;
}
.canaleButton {
  width: 70px;
  height: 30px;
  background: #ffffff;
  border: 1px solid #dcdde0;
  border-radius: 5px;
  color: #666666;
  line-height: 8px;
}
.jw-container {
  width: 1158px;
  height: 18px;
  overflow-y: auto;
  line-height: 25px; /*no*/
  padding: 10px;
  margin-top: 0;
  background-color: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  .jw__container {
    margin-top: 0;
    input {
      font-size: 16px; /*no*/
      color: #606266;
    }
  }
  .point-container {
    margin: 2px 0 1px; /*no*/
    .label {
      height: 24px; /*no*/
      line-height: 25px; /*no*/
      background: #f2f2f2;
      padding: 0 7px; /*no*/
    }
  }
}
</style>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
